<template>
	<view>
		<view class="one">
			<view class="two u-auto">
				<view class=" u-p-l-50 u-p-t-30 u-font-28">可用积分</view>
				<view class="u-p-l-50 u-m-t-20 u-font-60 u-weight">{{userinfo.score}}</view>
				<view class="u-flex u-row-around u-m-t-30">
					<view class="ones u-font-28 u-weight" @click="$u.route('/subcontract/myscore/scoregive/scoregive')">
						积分互转
					</view>
					
					<view v-if="is_shoper==1"  class="ones u-font-28 u-weight" @click="$u.route('/subcontract/jifenCZ/jifenCZ')">
						积分充值
					</view>
					<view class="ones u-font-28 u-weight" @click="$u.route('/subcontract/myscore/change/change')">
						兑换抵扣金
					</view>
				</view>
				<view class="u-m-t-20 u-text-center u-font-20" style="color: #FF5502;">*购买商品获得积分，积分商城可换购使用</view>
			</view>
			
			<view class=" u-m-t-30 u-p-20 u-w-700 bg_FFFFFF u-auto" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="u-p-l-20 u-weight" style="border-left: 6rpx solid #FF782C;">积分明细</view>
				
				<view v-for="(item,index) in list" :key="index" class="u-p-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F1F2F6;">
					<view class="">
						<view class="" >
						<text class="u-weight">{{item.remark}}</text>
						<text class="u-m-l-10 u-font-28" v-if="item.user_info">{{item.user_info.name}}</text>
						<text class="u-m-l-5 u-font-28" v-if="item.user_info">{{item.user_info.mobile}}</text>
						</view>
						
						<view class="u-font-20 u-m-t-20" style="color: #A5A6AC;">{{item.create_time}}</view>
					</view>
					<view class="u-font-34 u-weight" style="color:#FC3533 ;">{{item.direct==1?'+':'-'}}{{item.money}}</view>
				</view>
				<!-- 加载更多 -->
				<u-loadmore :status="status" icon-type="circle" margin-top="20" margin-bottom="20" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:'',
				params:{
					page: 1,
					page_size: 10,
					type:3,
					direct:'',
					days:'',
					
				},
				list:[],
				status: 'loadmore',
				is_shoper: 1
				
			}
		},
		onShow() {
			this.$api.get_my_massage({}, res => {
				if (res.data.code == 1) {
					this.userinfo = res.data.data.data
					this.is_shoper = res.data.data.data.is_shoper
					uni.setStorageSync("userinfo", this.userinfo)
					uni.setStorageSync("userInfo", this.userinfo)
				}
			})
			this.clear()
			this.my_money_deduct_detail()
		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.my_money_deduct_detail();
		},
		methods: {
			clear() {
				this.list = [];
				this.params.page = 1;
			},
			my_money_deduct_detail(){
				this.$api.my_money_deduct_detail(this.params,res=>{
					if (res.data.code == 1) {
						if (res.data.data.detail_list.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.list = this.list.concat(res.data.data.detail_list.data);
						uni.stopPullDownRefresh();
					}
				})
			},
			
		}
	}
</script>

<style scoped>
	.one {
		/* border: 1rpx solid red; */
		width: 750rpx;
		height: 915rpx;
		background: url('https://www.sqkjkj.vip/wxImg/score/img.png') no-repeat;
		background-size: 100% 100%;
	}
	.two{
		width: 683rpx;
		height: 377rpx;
		background: url('https://www.sqkjkj.vip/wxImg/score/img1.png') no-repeat;
		background-size: 100% 100%;
	}
	.ones{
		width: 191rpx;
		height: 61rpx;
		line-height: 61rpx;
		text-align: center;
		background: url('https://www.sqkjkj.vip/wxImg/score/img2.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
